<script setup>
import { reactive } from 'vue';
const text = reactive([
    { id: 1, title: '山东城院召开公文写作培训会', data: '2021-10-19' },
    { id: 2, title: '关于报送 2022 年部门重点工作和日常工作的通知', data: '2021-10-19' },
    { id: 3, title: '速读山东城院年度工作报告', data: '2021-10-19' },
    { id: 4, title: '中国共产当山东省城市服务技师学院第一届委员会第五次全体会议公报', data: '2021-10-19' },
    { id: 5, title: '山东城院召开2022年度工作会议', data: '2021-10-19' },
    { id: 6, title: '关于召开3月份月度调度会的通知', data: '2021-10-19' }
])
import $ from "jquery"
// 手机端显示ul
$(function () {
    $(".image4").click(function () {
        var bElement = $(".ul-right");
        if (bElement.is(":visible")) {
            bElement.hide();
        } else {
            bElement.show();
        }
    });
});
// 选项卡切换
$(function () {
    $(".one1").click(function () {
        console.log(1);
        $('#one').show();
        $('#two').hide();
        $('#third').hide();
    })
    $(".two1").click(function () {
        console.log(2);

        $('#two').show();
        $('#one').hide();
        $('#third').hide();

    })
    $(".three1").click(function () {
        console.log(3);

        $('#third').show();
        $('#one').hide();
        $('#two').hide();

    })
})
// import { ref, computed } from "vue";
// const count = ref([1, 2, 3, 4, 5, 6, 7])
// const countList = computed(() => {
//     return count.value.filter((item) => { return item > 2 })
// })
</script>

<template>
    <!-- <div>{{ countList }}</div>
    <div>{{ count }}</div> -->
    <div class="introduction">
        <!-- 头部导航 -->
        <div class="nav">
            <img class="image2" src="/img/wx2.png" alt="">
            <img class="image1" src="/img/wx4.png" alt="">
            <img class="image4" src="/img/图片1.png" alt="">
            <ul class="ul-right">
                <li><router-link to="/">首页</router-link> </li>
                <li> <router-link to="/introductiondemo">院部简介</router-link> </li>
                <li><a href="">办学特色</a></li>
                <li><a href="">专业介绍</a></li>
                <li><a href="">领导关怀</a></li>
                <li><a href="">对外交流</a></li>
                <li><a href="">社会服务</a></li>
                <li><a href="">师资力量</a></li>
                <li><a href="">实训中心</a></li>
                <li><a href="">实习基地</a></li>
            </ul>
        </div>
        <!-- 轮播图 -->
        <t-swiper class="tdesign-demo-block--swiper" :duration="300" :interval="2000">
            <t-swiper-item v-for="item in 4" :key="item">
                <div class="demo-item"><img src="/img/学院2.jpg" alt=""></div>
            </t-swiper-item>
        </t-swiper>
        <!-- 学院概况 -->
        <div class="academy">
            <div class="academy-left">
                <ul>
                    <li>
                        <a href="#">
                            <p>快速导航 <span>Quick navigation</span></p>
                        </a>
                        >
                    </li>
                    <li>
                        <a href="">院部简介</a>
                        <p class='p1'></p>
                    </li>

                </ul>
            </div>
            <div class="academy-right">
                <div class="top">
                    <div class="top-left">
                        <p>院部简介</p>
                    </div>
                    <div class="top-right">
                        <p>当前所在位置：</p>
                        <p>首页 | 院部简介</p>
                        <input type="text" placeholder="输入关键词搜索">
                        <img src="/img/放大镜.png" alt="">
                    </div>
                </div>
                <div class="bottom">
                    <div class="bottom-top">
                        <img class="one1" src="/img/师资2.png" alt="" />
                        <img class="two1" src="/img/师资3.png" alt="" />
                        <img class="three1" src="/img/师资1.png" alt="" />
                    </div>
                    <div id="third">
                        <div class="three1" v-for="item in 6" :key="item">
                            <div class="three-left">
                                <img src="/img/1965.png" alt="" />
                            </div>

                            <div class="three-right">
                                <div class="three-top">
                                    热情迎世赛，一起向未来:山东城院启动世赛倒计时200天特色活动
                                </div>
                                <div class="three-bottom">
                                    <img src="/img/时钟.png" alt="" />

                                    <p>2019/06/28</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="two">
                        <div class="two-top">
                            <div class="two1" v-for="item in 6" :key="item">
                                <img class="logo" src="/img/1965.png" alt="" />
                                <p>
                                    热情迎世赛，一起向未来:山东城院启动世赛倒计时200天特色活动
                                </p>
                                <div class="once"></div>
                                <div class="second">
                                    <p><img src="/img/时钟.png" alt="" />2022-02-17</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="one">
                        <!-- 图一 -->
                        <div id="bottom1" v-for="item in text" :key="item.id">
                            <li>{{ item.title }}</li>
                            <div class="bottom2">
                                <p>{{ item.data }}</p>
                            </div>
                        </div>

                        <!-- 图一结束 -->
                    </div>

                    <!-- 查看更多 -->
                    <div class="news3">
                        查看更多<img src="/img/4-min.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="foot">
            <div class="foot-one">
                <img src="/img/wx2.png" alt="">
                <img src="/img/wx4.png" alt="">
            </div>
            <div class="foot-top">
                <div class="center"><img src="/img/wx2.png" alt=""></div>
                <div class="left">
                    <ul>
                        <li>联系我们</li>
                        <li>办公室:0535-2246666</li>
                        <li>招生咨询:0535-2246625</li>
                        <li>官网:www.sdcc.edu.cn</li>
                        <li>邮箱:sdccxy@126.com</li>
                        <li>校 址:山东省烟台市高新区海天路1001号</li>
                    </ul>
                </div>
                <div class="right">
                    <img src="/img/微信.png" alt="">
                    <img src="/img/微博.png" alt="">
                    <img class="code" src="/img/收款码.jpg" alt="">
                </div>
            </div>
            <div class="foot-bottom">
                <p>Copyright @山东省城市服务技师学院版权所有</p>
            </div>
        </div>
    </div>
</template>
<style scoped lang="scss">
@import "/src/assets/Introduction/pcIntroduction.scss";
@import "/src/assets/Introduction/sjIntroduction.scss";

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
</style>